<template>
  <div id="app">
    <router-view name="login" />
    <el-container>
      <el-header class="my-header" style="background-color: #409eff;font-size: 14px">
        <span style="color: #fff;font-size: 16px">商城管理后台</span>
        <div class="right">
          <div class="btn-fullscreen" @click="handleFullScreen">
            <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
              <i class="el-icon-rank"></i>
            </el-tooltip>
          </div>
          <div class="user-avator">
            <img src="./assets/logo.png" />
          </div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link" style="color:#fff">
              <span>{{currentUser.username}}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="modifyPassWord">修改密码</el-dropdown-item>
              <el-dropdown-item command="signOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <right-menu />
        </el-aside>
        <el-container>
          <el-header>
            <div class="router-name">{{$route.meta.title}}</div>
          </el-header>
          <el-main style="padding-top:0;padding-bottom:80px">
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </el-container>
    <el-dialog title="修改密码" :visible.sync="DialogVisibledxgmm" width="40%" center>
      <re-password @submit="getMag" />
    </el-dialog>
    <el-dialog
      title="消息提醒"
      :visible.sync="isVisible"
      width="40%"
      center
      :show-close="false"
      :close-on-click-modal="true"
      :close-on-press-escape="false"
    >
      <span>您有一条新的订单，请及时查收。</span>
      <span>{{Sencond}}秒后关闭页面。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sendMsg" type="primary">查看</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Menu from "./components/Menu";
import Password from "./views/user/password";
import { mapState } from "vuex";
export default {
  components: {
    "right-menu": Menu,
    "re-password": Password
  },
  data() {
    return {
      fullscreen: false,
      interval: null,
      Sencond: 15, //设置初始倒计时
      isVisible: false,
      DialogVisibledxgmm: false,
      sysName: "商城管理",
      collapsed: false,
      sysUserName: "",
      //  sysUserName: "设置",
      url: require("./assets/default.png"),
      fifter: {
        password: "",
        password1: "",
        password2: ""
      },
      rules: {
        password: [
          { required: true, message: "请填写旧密码", trigger: "blur" }
        ],
        password1: [
          { required: true, message: "请填写新密码", trigger: "blur" }
        ],
        password2: [
          { required: true, message: "请填写确认密码", trigger: "blur" }
        ]
      },
      settimer: null
    };
  },
  watch: {
    currentMenus: function(oldValue, newValue) {
      this.currentMenus.forEach(element => {
        if (element.path == "/main") {
          // this.xunhuan();
        }
      });
    }
  },
  computed: {
    ...mapState({
      currentUser: state => {
        return state.login.currentUser;
      },
      currentMenus: state => {
        return state.menu.currentMenus;
      }
    })
  },
  mounted() {},
  methods: {
    getSencond() {
      const that = this;
      that.interval = setInterval(res => {
        --that.Sencond;
        if (that.Sencond === 0) {
          clearInterval(that.interval);
          that.sendMsg(); //倒计时结束时运行的业务逻辑，这里的是关闭当前页面
        }
      }, 1000);
    },
    sendMsg() {
      clearInterval(this.interval);
      this.isVisible = false;
      this.Sencond = 15;
    },
    xunhuan() {
      const that = this;
      this.$service.firstGood().then(res => {
        if (res.code == "00000") {
          this.productOptions = res.data || [];
        }
      });
      this.$service.firstGood().then(res => {
        if (res.code == "00000") {
          // that.new_num = res.data - that.num;
          that.tixin();
        }
        // this.num = res.data;
      });
      that.settimer = setTimeout(res => {
        that.xunhuan();
      }, 20000); //1w等于10秒
    },
    tixin() {
      const that = this;
      this.speckText("您有一条新的订单，请及时查收");
      this.isVisible = true;
      this.getSencond();
      // this.$notify({
      //   title: "订单提醒",
      //   message: "有" + "条新订单，请注意查看！",
      //   duration: 0,
      //   type: "success"
      // });
    },

    //语音播报
    speckText(str) {
      var url =
        "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=6&text=" +
        encodeURI(str);
      new Audio(url).play();
      //var n = new Audio(url);
      //n.src = url;
      //n.play();
    },
    handleCommand(command) {
      if (command == "signOut") {
        this.handleLoginOut();
      } else if (command == "modifyPassWord") {
        this.DialogVisibledxgmm = true;
      }
    },

    handleLoginOut() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        clearTimeout(this.settimer);
        this.settimer = null;
        localStorage.removeItem("isLogin");
        localStorage.removeItem("user");
        this.$router.replace("/");
      });
    },
    getMag(message) {
      this.DialogVisibledxgmm = false;
    },
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }
  }
};
</script>


<style lang="scss">
.router-name {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  font-weight: bold;
}

html body {
  margin: 0;
  padding: 0;
}

.el-tree-node__content {
  height: 50px !important;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.el-container {
  width: 100%;
  height: 100%;
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-aside {
  height: 92%;
}

.el-main.store-main {
  padding-bottom: 100px;
}

.table-body {
  margin-top: 20px;
}
.pagination {
  width: 100%;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
  color: #fff;
}
.user-avator {
  margin-left: 10px;
  margin-right: 10px;
}
.user-avator img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>
